<template>
  <el-container>
    <el-header>
      <div>
        <h1>{{ article.title }}</h1>
        <div>
          <a href=""><img :src="avatar" /></a>
          <div>
            <div>
              <a href="" class="author">{{ article.authorId }}</a>
              <span class="date">{{ article.createdAt }}</span>
            </div>
          </div>
        </div>
      </div>
    </el-header>

    <el-main>
      <el-row type="flex" justify="center" class="article-content">
        <el-col :span="24">
          <p v-html="article.body"></p>
        </el-col>
      </el-row>

      <hr color="EBEDF0" />

      <el-row type="flex" justify="end">
        <el-col :xs="24" :md="12" :offset-md="2">
          <el-card>
            <el-form>
              <el-input
                type="textarea"
                placeholder="写下你的评论..."
                rows="3"
              ></el-input>
            </el-form>
            <div style="text-align: right">
              <el-button type="primary" size="small"> 发布评论 </el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script setup>
import { ref, onMounted } from "vue";
import axios from "axios";

const slug = ref(window.location.pathname.split("/").pop());
const article = ref({});
const avatar = ref("https://api.realworld.io/images/demo-avatar.png");

onMounted(async () => {
  try {
    const response = await axios.get(`/api/articles/${slug.value}`);
    article.value = response.data;
  } catch (error) {
    console.error("Failed to fetch article:", error);
  }
});
</script>

<style scoped>
/* 设置左边距 */
.el-header,
.el-main {
  padding-left: 10rem;
  padding-right: 10rem;
}

/* 设置el-header样式 */
.el-header {
  background-color: hsl(98, 12%, 82%); /* 设置背景颜色 */
  color: #1d1c1c; /* 设置文字颜色 */
  height: 250px; /* 设置一个明确的高度，可以根据需要调整 */
  display: flex;
  align-items: center; /* 垂直居中 */
  font-size: 20px; /* 设置字体大小 */
  line-height: 1.3; /* 设置行高 */
}

/* 设置作者样式 */
.author {
  font-size: 1.2em; /* 增大字体大小 */
  text-decoration: none; /* 移除下划线 */
  color: #1d1c1c;
}

/* 设置日期样式 */
.date {
  margin-top: 0.5rem;
  display: block;
}

/* 设置文章正文样式 */
.article-content p {
  font-size: 1.2em; /* 设置字体大小 */
  line-height: 1.6; /* 设置行高 */
  padding-bottom: 2rem; /* 添加底部内边距以与边框分离 */
}
</style>